import React, { Component } from 'react'
import { Form, Input, Button, Checkbox, Image, message, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { setCookie, getCookie } from '../cookie'
import { getCaptch, login } from '../../../api/Login'

export default class LoginForm extends Component {
    // 提交表单，登录
    onFinish = async (values) => {
        const remember = values.remember
        delete values.remember
        await login(values).then(res => {
            if (res.data.ret == 0) {
                message.success('登录成功！')
                // 存储token和userId
                localStorage.setItem('UECP_token', res.data.token)
                localStorage.setItem('UECP_userId', res.data.userId)
                // 记住密码，密码采用Base64加密,存到cookie中
                if (remember) {
                    setCookie(values.username, values.password, 7)
                }
                this.props.history.push('/')
            } else {
                // 登录出错处理
                message.error(res.data.msg)
                this.getCaptcha()
            }
        })
    };
    // 获取验证码
    async getCaptcha() {
        await getCaptch().then(res => {
            this.setState({
                captchaUrl: res
            })
        })
    }
    // 从cookie中获取登录信息
    getInfoByCookie() {
        const obj = getCookie();
        if (Object.keys(obj).length !== 0) {
            this.state.form.username = obj.username;
            this.state.form.password = obj.password;
            this.setState({
                form: this.state.form
            })
        }
    }
    constructor(props) {
        super(props);
        this.state = {
            form: {
                username: '',
                password: '',
                captcha: '',
                remember: true
            },
            captchaUrl: ''
        }
    }
    componentWillMount() {
        this.getCaptcha()
        this.getInfoByCookie();
    }
    render() {
        const { form } = this.state
        return (
            <div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={form}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} value={form.username} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            value={form.password}
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name="captcha"
                                rules={[{ required: true, message: '请输入验证码!' }]}
                                className="captcha"
                            >
                                <Input
                                    placeholder="请输入验证码"
                                    value={form.captcha}
                                    className="captchaInput"
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Image src={this.state.captchaUrl} width={150} height={50} preview={false} onClick={this.getCaptcha.bind(this)}></Image>
                        </Col>
                    </Row>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>记住密码</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="">
                            忘记密码
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button" size="large">
                            登 录
                        </Button>
                        Or <a href="">立即注册!</a>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
